<!--
* 功能-页面实现
* Date: 2023-8-05
* Author: 靳从毅
 -->

<template>
    <div style="position: relative">
      <transition-group name="hello">
        <div v-show="visible" class="drawer drawerLeft" key="1">
          <div class="title">
            <span>数据筛选</span>
          </div>
          <div class="content">
            <FilterBar
              v-model="search"
              ref="FilterRef"
              :close-collapse="true"
              :hasButton="true"
              :filters="trolleyOptions"
              @search-change="findPage"
              @search-reset="reset"
              @on-toggle="(val: any)=>$emit('on-toggle',val)"
            />
          </div>
          <el-divider style="width: 90%; margin: auto; padding:2%"  />
          <div class="title">
            <span>信息列表</span>
            <table-common
                stripe
                :columns="houseVisualColumns"
                :loading="loading"
                :pagination="pager"
                :table-data="tableData"
                :highlight-current-row="isHighLight"
                height="450"
                @row-click="rowClick"
                @current-change="currentChange"
                @size-change="sizeChange"
                @sort-change="handleSort"
    >
  <!-- 通过具名传入自定义的结构，不添加的不写这个template  -->
  <template #link>
      <el-link @click="JumpHouseManger">查看完整信息>></el-link>
  </template>

    </table-common>
          </div>
        </div>
        <img
        :class="visible == true ? 'btn_a btnLeft btn' : 'btn_b btnLeft btn'"
        :src="visible == true? image.arrowLeft : image.arrowRight"
        key="2"
        style="float: left;"
        @click="visible = !visible"
      />
      </transition-group>
      <div class='mapLegend'>
        <span>图例</span>
        <span>房屋名称</span>
        <el-switch v-model="isShow" @change="showSwitch"  class="sw" size="small"/>
        <div>使用中
          <div class="legend" style="background: #bad4fb; border: 1px solid #2F7DF1;" />
        </div>
        <div>当前选中
          <div class="legend" style="background: #fbdbb0; border: 1px solid #f59f2e;" />
        </div>
        <div>已废弃
          <div class="legend" style="background: #f8f8f8; border: 1px solid #999999;" />
        </div>
      </div>
    </div>
    <map-control @mapLoad="mapLoadEvent"></map-control>
  </template>

<script lang="ts" setup>

import FilterBar from '@/components/FilterBar/index.vue'
import { ref, reactive, nextTick, onBeforeMount } from 'vue'
import TableCommon from '@/components/TableCommon/index.vue'
import { houseVisualPageList, PageListType } from '@/api/eqpt/houseVisual'
import { getResource } from '@/api/resource'
import { houseVisualColumns } from '@/views/eqpt/houseVisual/config/columns'
import { trolleyOptions } from '@/views/eqpt/houseVisual/config/filters'
// 以下3个为地图控件相关的组件
import mapControl from '@/components/map/index.vue'
import { store } from '@/components/map/mapStore'
import { image } from '@/assets/index'
import { ElMessage } from 'element-plus'
import router from '@/router'

/**
 * 约束
 */
 interface SearchType {
  houseName?:string;
}
interface ProblemType {
  eqptCode?: string
  eqptId?: string
}
const visible = ref(true)
const istrolleyOptions = ref(trolleyOptions)
const isShow = ref(false)
const isHighLight = ref(false)
const rowFocusId = ref(0)
const tableData = ref<ProblemType[]>([])
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 1
})
/**
 * 功能-地图加载
 */
const mapLoadEvent = () => {
  ElMessage.success('地图加载成功')
  textLayer = store.BNMap.creatGraphicsLayer({ id: 'text' })
  drawLayer = store.BNMap.creatGraphicsLayer({ id: 'demo' })
  getData()
}
// 7-27新增用于接收弹窗组件值的ref对象
const FilterRef = ref()

// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size
  getData()
}
const currentChange = (value: number) => {
  pager.currentPage = value
  getData()
}

/**
 * 功能-计算不规则图形质点
 */
const Area = (p0, p1, p2) => {
  let area = 0.0
  area = p0[0] * p1[1] + p1[0] * p2[1] + p2[0] * p0[1] - p1[0] * p0[1] - p2[0] * p1[1] - p0[0] * p2[1]
  return area / 2
}

/**
 * 功能-计算不规则图形质点
 * @param points 面的各顶点坐标
 */
const getPolygonAreaCenter = (points) => {
  let sumX = 0
  let sumY = 0
  let sumArea = 0
  let p1 = points[1]
  for (let i = 2; i < points.length; i++) {
    const p2 = points[i]
    const isArea = Area(points[0], p1, p2)
    sumArea += isArea
    sumX += (points[0][0] + p1[0] + p2[0]) * isArea
    sumY += (points[0][1] + p1[1] + p2[1]) * isArea
    p1 = p2
  }
  const xx = sumX / sumArea / 3
  const yy = sumY / sumArea / 3
  return [xx, yy]
}
const rowClick = (row) => {
  if (rowFocusId.value === row.houseId) {
    rowFocusId.value = 0
    isHighLight.value = false
    store.BNWindows.hide()
    let laseSectorsym
    if (lastLayer.state === '1') {
      laseSectorsym = store.BNSymbol.polygonSymbol(
        'solid',
        store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
        '#bad4fb'
      )
    } else {
      laseSectorsym = store.BNSymbol.polygonSymbol(
        'solid',
        store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
        '#f8f8f8'
      )
    }
    const getGraphicsLayer = totalGraphic.filter(item => {
      return item.id === lastLayer.draw
    })
    getGraphicsLayer[0].sectorGrp.symbol = laseSectorsym
  } else {
    rowFocusId.value = row.houseId
    isHighLight.value = true
    if (lastLayer.draw !== '') {
      let laseSectorsym
      if (lastLayer.state === '1') {
        laseSectorsym = store.BNSymbol.polygonSymbol(
          'solid',
          store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
          '#bad4fb'
        )
      } else {
        laseSectorsym = store.BNSymbol.polygonSymbol(
          'solid',
          store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
          '#f8f8f8'
        )
      }
      const getGraphicsLayer = totalGraphic.filter(item => {
        return item.id === lastLayer.draw
      })
      getGraphicsLayer[0].sectorGrp.symbol = laseSectorsym
    }
    let sectorsym
    const hightLine = store.BNSymbol.simpleLineSymbol('solid', '#f59f2e', 1)
    // eslint-disable-next-line prefer-const
    sectorsym = store.BNSymbol.polygonSymbol('solid', hightLine, '#fbdbb0')

    const getGraphicsLayer = totalGraphic.filter(item => {
      return item.id === row.houseId
    })
    const sectorGrp = getGraphicsLayer[0].sectorGrp
    sectorGrp.symbol = sectorsym

    const center = getCenterByGeometry(sectorGrp.geometry)
    // 设置图层中心点为地图中心点
    store.BNMap.setCenter(center.x-400, center.y)
    // // 赋值临时图层信息
    lastLayer.draw = row.houseId
    lastLayer.state = row.state

    // 弹窗显示内容
    let coordinate = ''
    row.coordinate.forEach(item => {
      coordinate = coordinate + item[0] + ',' + item[1] + '<br>'
    })
    let coordinateTipText = coordinate
    coordinate = coordinate.slice(0, -1)
    coordinate = coordinate.slice(0, 8) + '...'

    const state = row.state === '1' ? '使用中' : '已废弃'
    const html = '<table>' 
      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>名称:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" 
      + (row.houseName || '-') 
      + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>类别:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" 
      + (row.houseType || '-') + '</td></tr>' 
      
      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>编号:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" 
      + (row.houseCode || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>数量:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>"
      + (row.num || '-') + '</td></tr>' 

      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>面积(㎡):</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>"
      + (row.area || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>单价(万):</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" 
      + (row.price || '-') + '</td></tr>'

      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>月租金(元):</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>"
      + (row.rent || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>区域:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>"
      + (row.region || '-') + '</td></tr>'

      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>地图坐标:</td><td style='text-align:left;padding-left:15px;background-color:#F4F7FC;max-width:120px;'><div class='tooltip'>"+(coordinate || '-')+"<span class='tooltiptext'>" 
      + (coordinateTipText || '-') + "</span></div></td>  <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>使用单位:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" 
      + (row.organNames || '-') + '</td></tr>' 
      
      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状况:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE;'>" 
      + (row.condition || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>性质:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>"
      + (row.nature || '-') + '</td></tr>' 
      
      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>功能:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" 
      + (row.ability || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维保年限:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>"
      + (row.maintainLimit || '-') + '</td></tr>' 

      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>上次维保:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" 
      + (row.maintainTime || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>责任单位:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" 
      + (row.dutyOrganName || '-') + '</td></tr>'

      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>联系人:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" 
      + (row.linkUserName || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>联系电话:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>"
      + (row.linkPhone || '-') + '</td></tr>' 

      + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>楼层:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>"
      + (row.floor || '-') + "</td><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状态 :</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" 
      + (state || '-') + '</td></tr>' 
      + "</table style='color: #aaa;width:80px'>"

    // 设置弹窗内容
    store.BNWindows.setTitle('房屋基本信息')
    store.BNWindows.setContent(html)
    // 设置弹窗大小
    store.BNWindows.resize(280, 360)
    const point = getPolygonAreaCenter(row.coordinate)
    const mapPoint = store.BNMap.createPoint({ x: point[0], y: point[1], spatialReference: store.BNMap.spatialReference })
    store.BNWindows.show(mapPoint)
  }
}
let lastLayer = { draw: '', state: '' }
let totalGraphic = []
// 创建文字图层
let textLayer
let drawLayer

/**
 * 功能-将后端传回的数据回显到地图上
 * Date: 2023-8-09
 * @param data 后端返回的地图数据
 */
const drawAreaOnMap = (data) => {
  if (!Array.isArray(data.coordinate)) {
    ElMessage.error(data.houseName + '房屋区域坐标数据有误，请前往房屋动态管理处修改')
    return
  }
  const coordinate = []
  data.coordinate.forEach(item => {
    coordinate.push([item.latitude, item.longitude])
  })
  data.coordinate = coordinate
  // 定义高亮样式
  const hightLine = store.BNSymbol.simpleLineSymbol('solid', '#f59f2e', 1)
  const hightSymbol = store.BNSymbol.polygonSymbol('solid', hightLine, '#fbdbb0')
  const font = {
    size: 14,
    weight: 'bold'
  }
  const textSymbol = store.BNSymbol.textSymbol(data.houseName, font, '#fff')// 字体符号
  // 要素图层
  const polygon = store.BNGeometry.createPolygon({
    rings: data.coordinate,
    spatialReference: store.BNMap.spatialReference
  })
  let sectorsym
  if (data.state === '1') {
    sectorsym = store.BNSymbol.polygonSymbol(
      'solid',
      store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
      '#bad4fb'
    )
  } else {
    sectorsym = store.BNSymbol.polygonSymbol(
      'solid',
      store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
      '#f8f8f8'
    )
  }

  // 绘制颜色层内容
  const sectorGrp = store.BNMap.graphic(polygon, sectorsym)
  // 绘制文字层内容
  const testGrp = store.BNMap.graphic(polygon, textSymbol)
  sectorGrp.attributes = {
    houseName: data.houseName || '-',
    houseType: data.houseType || '-',
    houseCode: data.houseCode || '-',
    num: data.num || '-',
    area: data.area || '-',
    price: data.price || '-',
    rent: data.rent || '-',
    region: data.region || '-',
    coordinate: data.coordinate || '-',
    organNames: data.organNames || '-',
    condition: data.condition || '-',
    nature: data.nature || '-',
    ability: data.ability || '-',
    maintainLimit: data.maintainLimit || '-',
    dutyOrganName: data.dutyOrganName || '-',
    linkUserName: data.linkUserName || '-',
    linkPhone: data.linkPhone || '-',
    floor: data.floor || '-',
    state: data.state || '-',
    houseId: data.houseId
  }

  totalGraphic.push({ id: data.houseId, sectorGrp, testGrp })
  textLayer.add(testGrp)
  drawLayer.add(sectorGrp)

  // 创建窗体
  store.BNMap.bindEvent(drawLayer, 'click', function (evt) {
    if (evt.clickResult != null) {
      // drawLayer 为当前所操作的图层名称，保持和自己定义的图层名称一致
      if (lastLayer.draw !== '') {
        let sectorsym
        let id
        if (isShow.value) {
          id = evt.clickResult.results[1].graphic.attributes.houseId
        } else {
          id = evt.clickResult.results[0].graphic.attributes.houseId
        }
        if (lastLayer.draw !== id) {
          if (lastLayer.state === '1') {
            sectorsym = store.BNSymbol.polygonSymbol(
              'solid',
              store.BNSymbol.simpleLineSymbol('solid', '#2F7DF1', 1),
              '#bad4fb'
            )
          } else {
            sectorsym = store.BNSymbol.polygonSymbol(
              'solid',
              store.BNSymbol.simpleLineSymbol('solid', '#999999', 1),
              '#f8f8f8'
            )
          }
          const getGraphicsLayer = totalGraphic.filter(item => {
            return item.id === lastLayer.draw
          })
          getGraphicsLayer[0].sectorGrp.symbol = sectorsym
        }
      }
      let myLayer
      if (isShow.value) {
        myLayer = evt.clickResult.results[1]
      } else {
        myLayer = evt.clickResult.results[0]
      }
      // // 赋值临时图层信息
      const tempGraphic = myLayer.graphic
      lastLayer.draw = myLayer.graphic.attributes.houseId
      lastLayer.state = myLayer.graphic.attributes.state
      tempGraphic.symbol = hightSymbol
      // 弹窗显示内容
      let coordinate = '('
      data.coordinate.forEach(item => {
        coordinate = coordinate + item[0] + ',' + item[1] + ','
      })
      coordinate = coordinate.slice(0, -1)
      coordinate += ')'
      coordinate = coordinate.slice(0, 16) + '...'

      const state = myLayer.graphic.attributes.state === '1' ? '使用中' : '已废弃'
      const html = '<table>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>名称:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.houseName + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>类别:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.houseType + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>编号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.houseCode + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>数量:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.num + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>面积:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.area + "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>单价:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.price + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>月租金:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.rent + "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>区域:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.region + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>地图坐标:</td><td style='text-align:left;padding-left:15px;background-color:#F4F7FC;max-width:120px;overflow:hidden !important;white-space: nowrap;text-overflow: ellipsis;'>" + coordinate + "</td>  <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>使用单位:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.organNames + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状况:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.condition + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>性质:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.nature + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>功能:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.ability + "</td>                                                      <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维保年限:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.maintainLimit + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>责任单位:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.dutyOrganName + "</td>                                                <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>联系人:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + myLayer.graphic.attributes.linkUserName + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>联系电话:</td><td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.linkPhone + "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>楼层:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" + myLayer.graphic.attributes.floor + '</td></tr>' + "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>状态 :</td>   <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" + state + '</td></tr>' + "</table style='color: #aaa;width:80px'>"
      // 设置弹窗内容
      store.BNWindows.setTitle('房屋基本信息')
      store.BNWindows.setContent(html)
      // 设置弹窗大小
      store.BNWindows.resize(280, 360)
      store.BNWindows.show(evt.mapPoint)
    }
  })
}

const loading = ref(false)
/**
 * 功能-向api传参，进行条件查询
 * Date: 2023-8-06
 * Author: 郑钦懋
 */
const getData = async () => {
  loading.value = true
  const payload: PageListType = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: {
    }
  }
  // 传递查询的内容到api
  if (search.value.houseName) {
    var str = search.value.houseName
    payload.condition.houseName = str.replace(/\s+/g, "")
  }
  if (search.value.houseType) {
    payload.condition.houseType = search.value.houseType || ''
  }
  if (search.value.houseCode) {
    var str = search.value.houseCode
    payload.condition.houseCode = str.replace(/\s+/g, "")
  }
  if (search.value.region) {
    payload.condition.region = search.value.region || ''
  }
  if (search.value.state) {
    payload.condition.state = search.value.state || ''
  }
  if (order) {
    payload.condition.order = order || ''
  }

  // res获取查询后的数据列表
  const res = await houseVisualPageList(payload)
  const res1 = await getResource('house_region')
  const res2 = await getResource('house_category')
  const res3 = await getResource('house_ability')
  const res4 = await getResource('house_nature')
  loading.value = false
  store.BNWindows.hide()
  lastLayer = { draw: '', state: '' }
  totalGraphic = []
  drawLayer.removeAll()
  textLayer.removeAll()
  res.data.list.forEach((item: { region: any; houseType: any; ability: any; nature: any }) => {
    for (const i of res1.data.properties.meta) {
      if (i.value === item.region) {
        item.region = i.label
      }
    }
    for (const i of res2.data.properties.meta) {
      if (i.value === item.houseType) {
        item.houseType = i.label
      }
    }
    for (const i of res3.data.properties.meta) {
      if (i.value === item.ability) {
        item.ability = i.label
      }
    }
    for (const i of res4.data.properties.meta) {
      if (i.value === item.nature) {
        item.nature = i.label
      }
    }
    drawAreaOnMap(item)
  })
  // res2未加查询条件的数据列
  nextTick(() => {
    store.BNMap.addGraphicsLayer(drawLayer)
    // 后加入文字图层，避免被颜色图层覆盖
    store.BNMap.addGraphicsLayer(textLayer)
    showSwitch()
    
  })
  if (res) {
    tableData.value = res.data.list
    pager.total = res.data.total
    if(pager.total === 0){
      pager.pageCount = 1
    }else{
      pager.pageCount = Math.ceil(pager.total / pager.pageSize)
    }
  } else {
    ElMessage.error('获取列表失败，请刷新重试！')
  }
}

let order: string | { column: string; method: any }[] = []
/**
 * 功能-排序
 * Date: 2023-8-06
 * Author: 郑钦懋
 * @param value { order: 排序顺序; prop: table表字段名 }
 */
const handleSort = (value: { order: string; prop: string }) => {
  const sort = value.order?.slice(0, -6) || 'asc'
  order = []
  if (value.prop === 'houseCode') {
    order = [{ column: 'house_code', method: sort }]
  } else if (value.prop === 'state') {
    order = [{ column: 'state', method: sort }]
  }
  FilterRef.value.order = order
  getData()
}

/**
 * 功能-清空查询条件
 * Date: 2023-8-06
 * Author: 郑钦懋
 */
const reset = (data: FilterDataType) => {
  search.value = data
  pager.currentPage = 1
  pager.pageSize = 10
  getData()
}

/**
     * 通过geometry获取中心点
     * @param geometryArgs 范围
     * @returns 经纬度点对象
     */
const getCenterByGeometry = (geometryArgs: { rings: any[] }) => {
  // 创建中心点对象
  const centerObject = {}
  // 得到当前要素的上、下、左、右偏移量
  const rings = geometryArgs.rings[0]
  if (rings.length % 2 === 0) {
    centerObject.x = rings[rings.length / 2][0]
    centerObject.y = rings[rings.length / 2][1]
  } else {
    centerObject.x = rings[(rings.length + 1) / 2][0]
    centerObject.y = rings[(rings.length + 1) / 2][1]
  }
  // 返回中心点
  return centerObject
}

/**
 * 功能-获取数据字典房屋类型
 * Date: 2023-8-08
 * Author: 靳从毅
 */
const gethouseType = async () => {
  getResource('house_category').then(
    (res) => {
      istrolleyOptions.value.forEach((e) => {
        if (e.prop === 'houseType') {
          e.inputProps.options = res.data.properties.meta
          e.inputProps.options.unshift({label:'全部',value:''})
        }
      })
    }
  )
}

/**
 * 功能-房屋名称显示切换开关
 * Date: 2023-8-08
 * Author: 靳从毅
 */
const showSwitch = () => {
  // 遍历房屋名称数组，挨个改变文本图层是否显示
  textLayer.visible = isShow.value
}

/**
 * 功能-获取数据字典房屋区域
 * Date: 2023-8-08
 * Author: 靳从毅
 */
const getregion = async () => {
  getResource('house_region').then(
    (res) => {
      istrolleyOptions.value.forEach((e) => {
        if (e.prop === 'region') {
          e.inputProps.options = res.data.properties.meta
          e.inputProps.options.unshift({label:'全部',value:''})
        }
      })
    }
  )
}

/**
 * 功能-跳转到房屋动态管理页面
 * Date: 2023-8-08
 * Author: 靳从毅
 */
const JumpHouseManger = () => {
  router.push('/eqpt/houseManger')
}

/*
  * 功能-查询
  * Date: 2023-8-30
  * Author: 郑钦懋
  * @param data 输入查询数据
*/
const search = ref({})
const findPage = (data: FilterDataType) => {
  search.value = data
  getData()
}


onBeforeMount(() => {
  gethouseType()
  getregion()
})

</script>
  <style lang="less" scoped>
  .dialog {
    pointer-events: none;
  }
  .dialog /deep/ .el-dialog {
    pointer-events: auto;
    position: absolute;
    left: 640px;
    top: 140px;
  }
  </style>
  <style lang="less" scoped>
  /* 进入动画 */
  .hello-enter-active {
    animation: move 1s;
    animation-timing-function: linear;
  }
  .hello-leave-active {
    animation: move 1s reverse;
    animation-timing-function: linear;
  }

  @keyframes move {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translate(0);
    }
  }
  .drawer {
    width: 600px;
    height: 830px;
    padding: 10px;
    margin-top: 5px;
    margin-left: 10px;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    z-index: 999;
    background-color: #fff;
    float: left;
  }

  
.drawerLeft {
    width: 680px;
    position: absolute;
    top: 0;
    left: 0;
}
  .drawer > .title {
    line-height: 32px;
    height: 32px;
    margin-bottom: 10px;
    padding-right: 15px;
    span {
      margin-left: 5px;
      display: inline-block;
      height: 14px;
      line-height: 14px;
      font-weight: bolder;
      border-left: #2F7DF1 3px solid;
      text-indent: 1em;
    }
    .newArea {
      float: right;
    }
    .titleNumMsg {
    text-indent: 1em;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    display: block;
    .num {
      display: inline-block;
      float: left;
      padding-right: 9px;
      span {
        text-indent: 5px;
        height: 20px;
        margin-top: -3px;
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 20px;
        font-weight: bolder;
        border: 0;
        color: #2F7DF1;
      }
    }
    .num:not(:first-child) {
      border-left: 1px solid #DDD;
    }
  }
    p {
        height: 14px;
        line-height: 14px;
        text-indent: 1em;

        span {
            all: initial;
            color: #2F7DF1;
            font-size: 20px;
            font-weight: 700

        }
        padding-bottom: 30px;
    }
  }
  .dialog {
    /deep/ .el-form-item__label {
      text-align: left;
      width: 130px !important;
    }
  }
  .drawer > .content {
    line-height: 32px;
    height: 100px;
    margin-bottom: 20px;
    padding: 0 10px 10px;
    position: relative;
    /deep/ .el-form-item__label {
      text-align: right;
      width: 85px !important;
      padding: 0;
      margin-right: 10px;
      display: inline-block;
    }
    /deep/ .el-form-item {
      margin-bottom: 5px;
    }
    /deep/ .filter-wrapper {
      display: inline-block;
    }
    /deep/ .button-group {
      width: 200px;
      position: absolute;
      top: 73px;
      left: 465px;
    }
  }
  .msgList {
    padding: 10px 0 10px 10px;
    overflow-y: scroll;
    height: 580px
  }
  .msgList::-webkit-scrollbar {
    display: none;
  }
  .listDiv {
    border: #D7D7D7 1px solid;
    border-radius: 8px;
    font-size: 14px;
    padding: 8px;
    max-height: 120px;
    overflow-y: hidden;
    margin-bottom: 10px;
    .top {
      width: 100%;
      height: 24px;
      line-height: 24px;
      vertical-align: center;
    }
    .top span {
      display: inline-block;
      height: 24px;
      line-height: 24px;
      text-indent: 5px;
      float: left;
      border: 0;
    }
    .top span img {
      margin-top: 2px;
    }
    .top span:first-child {
      font-weight: bolder;
      text-indent: 2px;
      text-align: left;
    }
    .top span:last-child {
      float: right;
      text-align: right;
    }
    .list {
      line-height: 14px;
      max-height: 60px;
      overflow-y: scroll;
    }
    .list::-webkit-scrollbar {
      display: none;
    }
  }
  .subLayer {
    position: absolute;
    width: 35px;
    top: 50px;
    border: 0;
  }
  .subLayer /deep/ .el-radio-button .el-radio-button__inner {
    width: 35px;
    border: 1px #FFF solid;
    padding: 10px;
  }
  .subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
    border-radius: 6px 6px 0 0;
  }
  .subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
    border-radius: 0 0 6px 6px;
  }
  .btnLayer {
    position: absolute;
    top: 10px;
    border: 0;
    transition: left 1s;
    transition-timing-function: linear;
  }
  .btn {
    width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #FFF;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
  object-fit: none;
  }
  .btn_d {
    left: 700px;
  }
  .btn_c {
    left: 10px;
  }
  .btn_b {
    left: 0;
  }
  .btn_a {
    left: 710px;
  }

  .mapLegend {
    padding: 10px;
    background: #FFF;
    border-radius: 8px;
    position: absolute;
    width: 180px;
    height: 160px;
    top: 680px;
    right: 10px;
    transition: right 1s;
    font-size: 12px;
    transition-timing-function: linear;
  .sw {
    margin-top: 5px;
    margin-left: 30px;
  }
  div {
    margin-bottom: 8px;
    line-height: 30px;
    .legend {
      float: right;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }
    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }
    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2F7DF1;
    text-indent: 10px;
  }
}
.mapLegend_a {
  height: 150px;
  right: 420px;
  top: calc(74vh - 22px);
}
  </style>
